<template>
  <view>
    <uni-page-body>
      <uni-view class="date all-flex all-flex-row all-row-center all-col-center">
        <uni-view
          class="header all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
        >
          <uni-text
            data-v-0a75b799=""
            class="uni-icons uniui-left"
            style="color: rgb(255, 255, 255); font-size: 30px"
            ><span></span
          ></uni-text>
          <uni-view class="all-flex-spacer"></uni-view>
          <uni-view class="date-font">{{ props.currentData['solar'] }}</uni-view>
          <uni-view class="all-flex-spacer"></uni-view>
          <uni-text
            data-v-0a75b799=""
            class="uni-icons uniui-right"
            style="color: rgb(255, 255, 255); font-size: 30px"
            ><span></span
          ></uni-text>
        </uni-view>
        <uni-view
          class="out all-flex all-flex-col all-row-center all-col-center"
          style="width: calc(100% - 20px); margin: 10px 10px"
        >
          <uni-view
            class="container all-flex-nowarp all-flex all-flex-row all-row-center all-col-start"
            style="width: 100%; border-bottom: 1px solid rgb(183, 173, 161)"
          >
            <uni-view
              class="left all-flex all-flex-col all-row-start all-col-center"
              style="width: 37%"
            >
              <uni-view style="width: 100%; height: 25px"></uni-view>
              <uni-view
                style="
                  width: 50px;
                  height: 50px;
                  background-color: rgb(186, 48, 61);
                  border-radius: 50%;
                  line-height: 50px;
                  text-align: center;
                  color: rgb(255, 255, 255);
                  font-size: 30px;
                "
                >宜</uni-view
              >
              <uni-view style="width: 100%; height: 15px"></uni-view>
              <uni-view
                class="all-flex all-flex-row all-row-center all-col-center"
                style="width: 100%; margin-bottom: 10px"
              >
                <uni-view
                  style="margin-left: 3px; margin-right: 3px"
                  v-for="item in props.currentData['dayYi'].split(' ')"
                  :key="item"
                  >{{ item }}</uni-view
                >
              </uni-view>
            </uni-view>
            <uni-view
              class="middle all-flex all-flex-row all-row-center all-col-center"
              style="
                width: 26%;
                min-height: 180px;
                border-left: 1px solid rgb(183, 173, 161);
                border-right: 1px solid rgb(183, 173, 161);
                height: 121px;
              "
            >
              <uni-view style="font-size: 25px; font-weight: 800">
                <uni-view style="color: rgb(186, 48, 61)">{{
                  props.currentData['lunar'][0]
                }}</uni-view>
                <uni-view style="margin-top: -1px">{{ props.currentData['lunar'][1] }}</uni-view>
                <uni-view style="color: rgb(186, 48, 61); margin-top: -1px">{{
                  props.currentData['lunar'][2]
                }}</uni-view>
                <uni-view style="color: rgb(186, 48, 61); margin-top: -1px">{{
                  props.currentData['lunar'][3]
                }}</uni-view>
                <uni-view style="margin-top: -1px">{{ props.currentData['lunar'][4] }}</uni-view>
              </uni-view>
            </uni-view>
            <uni-view
              class="right all-flex all-flex-col all-row-start all-col-center"
              style="width: 37%; height: 100%"
            >
              <uni-view style="width: 100%; height: 25px"></uni-view>
              <uni-view
                style="
                  width: 50px;
                  height: 50px;
                  background-color: rgb(45, 127, 55);
                  border-radius: 50%;
                  line-height: 50px;
                  text-align: center;
                  color: rgb(255, 255, 255);
                  font-size: 30px;
                "
                >忌</uni-view
              >
              <uni-view style="width: 100%; height: 15px"></uni-view>
              <uni-view
                class="all-flex all-flex-row all-row-center all-col-center"
                style="width: 100%; margin-bottom: 10px"
              >
                <uni-view
                  style="margin-left: 3px; margin-right: 3px"
                  v-for="item in props.currentData['dayJi'].split(' ')"
                  :key="item"
                  >{{ item }}</uni-view
                >
              </uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="all-flex-nowarp all-flex all-flex-row all-row-center all-col-start"
            style="height: 155px; width: 100%; border-bottom: 1px solid rgb(183, 173, 161)"
          >
            <uni-view
              class="all-flex all-flex-col all-row-start all-col-center"
              style="width: 37%; height: 100%; text-align: center; margin-bottom: 10px"
            >
              <uni-view style="width: 100%; height: 5px"></uni-view>
              <uni-view style="width: 100%; font-size: 30px; font-weight: 600">吉神</uni-view>
              <uni-view style="width: 100%; height: 10px"></uni-view>
              <uni-view
                class="all-flex all-flex-row all-row-center all-col-center"
                style="width: 100%"
              >
                <uni-view
                  style="margin-left: 3px; margin-right: 3px"
                  v-for="item in props.currentData['dayJiShen'].split(' ')"
                  :key="item"
                  >{{ item }}</uni-view
                >
              </uni-view>
            </uni-view>
            <uni-view
              style="
                width: 26%;
                height: 100%;
                border-left: 1px solid rgb(183, 173, 161);
                border-right: 1px solid rgb(183, 173, 161);
              "
            >
              <uni-view
                class="all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
                style="
                  width: 100%;
                  height: 77px;
                  font-size: 17px;
                  font-weight: 600;
                  border-bottom: 1px solid rgb(183, 173, 161);
                "
              >
                <uni-view
                  class="line-right all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="width: 25%; height: 100%; text-align: center"
                >
                  <uni-view>{{ props.currentData['timeInGanZhi'] }}</uni-view>
                </uni-view>
                <uni-view
                  class="all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="width: 25%; height: 100%; text-align: center"
                >
                  <uni-view>{{ props.currentData['dayInGanZhi'] }}</uni-view>
                </uni-view>
                <uni-view
                  class="all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="
                    text-align: center;
                    width: 25%;
                    height: 100%;
                    border-left: 1px solid rgb(183, 173, 161);
                    border-right: 1px solid rgb(183, 173, 161);
                  "
                >
                  <uni-view>{{ props.currentData['monthInGanZhi'] }}</uni-view>
                </uni-view>
                <uni-view
                  class="all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="width: 25%; height: 100%; text-align: center"
                >
                  <uni-view>{{ props.currentData['yearInGanZhi'] }}</uni-view>
                </uni-view>
              </uni-view>
              <uni-view
                class="all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
                style="width: 100%; height: 77px; font-size: 17px; font-weight: 600"
              >
                <uni-view
                  class="line-right all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="width: 25%; height: 100%; text-align: center"
                >
                  <uni-view>{{ props.currentData['timeNaYin'] }}</uni-view>
                </uni-view>
                <uni-view
                  class="all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="width: 25%; height: 100%; text-align: center"
                >
                  <uni-view>{{ props.currentData['dayNaYin'] }}</uni-view>
                </uni-view>
                <uni-view
                  class="all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="
                    text-align: center;
                    width: 25%;
                    height: 100%;
                    border-left: 1px solid rgb(183, 173, 161);
                    border-right: 1px solid rgb(183, 173, 161);
                  "
                >
                  <uni-view>{{ props.currentData['monthNaYin'] }}</uni-view>
                </uni-view>
                <uni-view
                  class="all-flex-nowarp all-flex all-flex-col all-row-center all-col-center"
                  style="width: 25%; height: 100%; text-align: center"
                >
                  <uni-view>{{ props.currentData['yearNaYin'] }}</uni-view>
                </uni-view>
              </uni-view>
            </uni-view>
            <uni-view
              class="all-flex all-flex-col all-row-start all-col-center"
              style="width: 37%; height: 100%; text-align: center; margin-bottom: 10px"
            >
              <uni-view style="width: 100%; height: 5px"></uni-view>
              <uni-view style="width: 100%; font-size: 30px; font-weight: 600">凶神</uni-view>
              <uni-view style="width: 100%; height: 10px"></uni-view>
              <uni-view
                class="all-flex all-flex-row all-row-center all-col-center"
                style="width: 100%"
              >
                <uni-view
                  style="margin-left: 3px; margin-right: 3px"
                  v-for="item in props.currentData['dayXiongSha'].split(' ')"
                  :key="item"
                  >{{ item }}</uni-view
                >
              </uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
          >
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">生肖</uni-view>
              <uni-view class="explain">{{ props.currentData['monthShengXiao'] }}</uni-view>
            </uni-view>
            <uni-view class="unit unit-line all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">财神方</uni-view>
              <uni-view class="explain">{{ props.currentData['dayPositionCaiDesc'] }}</uni-view>
            </uni-view>
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">幸运生肖</uni-view>
              <uni-view class="explain">{{ props.currentData['dayXiShengXiao'] }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
          >
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">星座</uni-view>
              <uni-view class="explain">{{ props.currentData['xingZuo'] }}</uni-view>
            </uni-view>
            <uni-view class="unit unit-line all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">福神方</uni-view>
              <uni-view class="explain">{{ props.currentData['dayPositionFuDesc'] }}</uni-view>
            </uni-view>
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">十二除建</uni-view>
              <uni-view class="explain">{{ props.currentData['zhiXing'] }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
          >
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">值神</uni-view>
              <uni-view class="explain">{{ props.currentData['dayTianShen'] }}</uni-view>
            </uni-view>
            <uni-view class="unit unit-line all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">喜神方</uni-view>
              <uni-view class="explain">{{ props.currentData['dayPositionXiDesc'] }}</uni-view>
            </uni-view>
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">空亡所值</uni-view>
              <uni-view class="explain">{{ props.currentData['dayXunKong'] }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
          >
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">冲煞</uni-view>
              <uni-view class="explain">{{ props.currentData['chongSha'] }}</uni-view>
            </uni-view>
            <uni-view class="unit unit-line all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">阳贵方</uni-view>
              <uni-view class="explain">{{ props.currentData['dayPositionYangGuiDesc'] }}</uni-view>
            </uni-view>
            <uni-view
              class="unit all-flex all-flex-nowarp all-flex-row all-row-start all-col-center"
            >
              <uni-view class="title" style="margin: 0 5px">{{
                props.currentData['jieQi'].substring(0, 4)
              }}</uni-view>
              <uni-view class="explain">{{ props.currentData['jieQi'].substring(4) }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
          >
            <uni-view class="unit all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">星宿</uni-view>
              <uni-view class="explain">{{ props.currentData['xingshu'] }}</uni-view>
            </uni-view>
            <uni-view class="unit unit-line all-flex all-flex-row all-row-start all-col-center">
              <uni-view class="title">阴贵方</uni-view>
              <uni-view class="explain">{{ props.currentData['dayPositionYinGui'] }}</uni-view>
            </uni-view>
            <uni-view
              class="unit all-flex all-flex-nowarp all-flex-row all-row-start all-col-center"
            >
              <uni-view class="title" style="margin: 0 5px">{{
                props.currentData['nextJieQi'].substring(0, 4)
              }}</uni-view>
              <uni-view class="explain">{{ props.currentData['nextJieQi'].substring(4) }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
          >
            <uni-view
              class="unit all-flex all-flex-row all-row-start all-col-center"
              style="width: 50% !important"
            >
              <uni-view class="title">吉颜色</uni-view>
              <uni-view class="explain">{{ props.currentData['dayLuckColour'] }}</uni-view>
            </uni-view>
            <uni-view
              class="unit unit-line-left all-flex all-flex-row all-row-start all-col-center"
              style="width: 50% !important"
            >
              <uni-view class="title">忌颜色</uni-view>
              <uni-view class="explain">{{ props.currentData['dayJiColour'] }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
          >
            <uni-view
              class="unit all-flex all-flex-row all-row-start all-col-center"
              style="width: 50% !important"
            >
              <uni-view class="title">吉数字</uni-view>
              <uni-view class="explain">{{ props.currentData['dayLuckNumber'] }}一 七 六</uni-view>
            </uni-view>
            <uni-view
              class="unit unit-line-left all-flex all-flex-row all-row-start all-col-center"
              style="width: 50% !important"
            >
              <uni-view class="title">忌数字</uni-view>
              <uni-view class="explain">{{ props.currentData['dayJiNumber'] }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view
            class="second all-flex-nowarp all-flex all-flex-row all-row-center all-col-center"
            style="border-bottom: unset !important"
          >
            <uni-view
              class="unit all-flex all-flex-row all-row-start all-col-center"
              style="width: 100% !important"
            >
              <uni-view class="title">幸运花</uni-view>
              <uni-view class="explain">{{ props.currentData['dayLuckFlower'] }}</uni-view>
            </uni-view>
          </uni-view>
        </uni-view>
        <uni-view style="margin-top: 00px"></uni-view>
        <uni-view
          class="third out all-flex all-flex-row all-row-center all-col-center"
          style="margin: 10px"
        >
          <uni-view
            class="line-bottom"
            style="
              width: 100%;
              font-size: 18px;
              color: rgb(186, 48, 61);
              height: 35px;
              line-height: 35px;
              font-weight: 600;
              text-align: center;
            "
            >时辰吉凶表</uni-view
          >

          <uni-view
            class="line-bottom all-flex all-flex-nowarp all-flex-row all-row-center all-col-center"
            style="width: 100%"
          >
            <uni-view class="unit line-right" style="width: 9%">时辰</uni-view>
            <uni-view class="unit line-right" style="width: 9%">吉凶</uni-view>
            <uni-view class="unit line-right" style="width: 9%">星神</uni-view>
            <uni-view class="unit line-right" style="width: 28%">吉神/凶煞</uni-view>
            <uni-view class="unit line-right" style="width: 9%">煞方</uni-view>
            <uni-view class="unit line-right" style="width: 9%">喜神</uni-view>
            <uni-view class="unit line-right" style="width: 9%">财神</uni-view>
            <uni-view class="unit" style="width: 18%">时刻</uni-view>
          </uni-view>
          <uni-view
            v-for="item in props.currentData.timeJiXiongList"
            class="all-flex all-flex-nowarp all-flex-row all-row-center all-col-center"
            style="width: 100%"
          >
            <uni-view class="unit line-right" style="width: 9%">{{ item.time }}</uni-view>
            <uni-view
              class="unit line-right"
              :style="{
                width: '9%',
                color: item.timeTianShenLuck === '吉' ? 'rgb(186, 48, 61)' : '',
              }"
              >{{ item.timeTianShenLuck }}</uni-view
            >
            <uni-view class="unit line-right" style="width: 9%">{{ item.timeTianShen }}</uni-view>
            <uni-view class="unit line-right" style="width: 28%">{{ item.timeShenSha }}</uni-view>
            <uni-view class="unit line-right" style="width: 9%">{{ item.timeSha }}</uni-view>
            <uni-view class="unit line-right" style="width: 9%">{{
              item.timePositionXiDesc
            }}</uni-view>
            <uni-view class="unit line-right" style="width: 9%">{{
              item.timePositionCaiDesc
            }}</uni-view>
            <uni-view class="unit" style="width: 18%">{{ item.timeRange }}</uni-view>
          </uni-view>
        </uni-view>
        <uni-view style="padding-top: 20px"></uni-view>
        <!-- <uni-view class="fourth out all-flex all-flex-row all-row-around all-col-center" style="width: 100%; padding: 5px">
					<uni-view style="width: 23%">
						<uni-view class="unit">八字算命</uni-view>
					</uni-view>
					<uni-view style="width: 23%">
						<uni-view class="unit">男女合婚</uni-view>
					</uni-view>
					<uni-view style="width: 23%">
						<uni-view class="unit">风水勘测</uni-view>
					</uni-view>
					<uni-view style="width: 23%">
						<uni-view class="unit">民俗择日</uni-view>
					</uni-view>
					<uni-view style="width: 23%">
						<uni-view class="unit">易学培训</uni-view>
					</uni-view>
					<uni-view style="width: 23%">
						<uni-view class="unit">灵通法坛</uni-view>
					</uni-view>
					<uni-view style="width: 23%">
						<uni-view class="unit">易学百科</uni-view>
					</uni-view>
					<uni-view style="width: 23%">
						<uni-view class="unit">联系我们</uni-view>
					</uni-view>
				</uni-view> -->
      </uni-view>
    </uni-page-body>
  </view>
</template>

<script setup>
  const props = defineProps({
    currentData: Object,
  });
</script>

<style lang="scss" scoped>
  uni-view {
    display: block;
  }
  uni-page-body {
    background-color: #fcf9f0;
  }
  uni-page-body,
  uni-page-refresh {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }
  .header {
    width: 100%;
    background-color: #cb7b48;
    height: 70px;
    .text {
      color: #e10c10;
      font-size: 16px;
      font-weight: 800;
      text-shadow: 0 1px #fff, 1px 0 #fff, -1px 0 #fff, 0 -1px #fff;
    }
  }
  .out {
    border-top: 2px solid #ab8767;
    border-left: 2px solid #ab8767;
    border-bottom: 2px solid #ab8767;
    border-right: 2px solid #ab8767;
  }
  .all-flex {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
  }
  .all-flex-nowarp {
    flex-wrap: nowrap !important;
    -webkit-flex-wrap: nowrap !important;
  }
  .all-flex-row {
    flex-direction: row;
  }
  .all-flex-col {
    flex-direction: column;
  }
  .all-row-center {
    justify-content: center;
  }
  .all-row-start {
    justify-content: flex-start;
  }
  .all-row-end {
    justify-content: flex-end;
  }
  .all-row-around {
    justify-content: space-around;
  }
  .all-row-between {
    justify-content: space-between;
  }
  .all-col-center {
    align-items: center;
  }
  .all-col-start {
    align-items: flex-start;
  }
  .all-col-end {
    align-items: flex-end;
  }
  .all-col-stretch {
    align-items: stretch;
  }
  .all-flex-spacer {
    flex-grow: 1;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .date {
    width: 100%;
  }
  .date .header {
    width: 100%;
    background-color: #cb7b48;
    height: 70px;
  }
  .date .header .date-font {
    color: #e10c10;
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 1px #fff, 1px 0 #fff, -1px 0 #fff, 0 -1px #fff;
  }
  .date .out {
    border-left: 2px solid #ab8767;
    border-bottom: 2px solid #ab8767;
    border-right: 2px solid #ab8767;
  }
  .date .line-bottom {
    border-bottom: 1px solid #b7ada1;
  }
  .date .line-right {
    border-right: 1px solid #b7ada1;
  }
  .date .unit-line-left {
    border-left: 1px solid #b7ada1;
  }
  .date .second {
    height: 30px;
    width: 100%;
    border-bottom: 1px solid #b7ada1;
    font-weight: 600;
  }
  .date .second .unit {
    width: 33%;
    height: 100%;
    text-align: center;
  }
  .date .second .unit .title {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 12px;
  }
  .date .second .unit .explain {
    font-size: 9px;
  }
  .date .second .unit-line {
    border-left: 1px solid #b7ada1;
    border-right: 1px solid #b7ada1;
  }
  .date .third {
    border-top: 2px solid #ab8767;
    border-radius: 9px;
  }
  .date .third .unit {
    width: 100%;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-weight: 600;
    font-size: 10px;
  }
  .date .fourth {
    border-top: 2px solid #ab8767;
    border-radius: 9px;
  }
  .date .fourth .unit {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 11px;
    color: #e10c10;
    background-image: url(/static/images/bazi_bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
  }
</style>
